<!DOCTYPE html>
<html lang="en">

<!--
  Author：蓝田_Loto
  Date：2018-10-12 10:41
  PageName：b_Text_VerticalAlign.html
  Function：文本样式 - 垂直对齐方式
  URL：http://localhost:8080/e2_webpage_TextStyle/b_Text_VerticalAlign.html
-->

<head>
    <meta charset="UTF-8">
    <title>文本样式 - 垂直对齐方式</title>

    <style type="text/css">
        /* 布局包含框 */
        #box {
            display: table-cell; /* 单元格显示 */
            vertical-align: middle; /* 垂直居中 */
            width: 300px; /* 固定宽度 */
            height: 200px; /* 固定高度 */
            border: solid 1px red; /* 红色边框线 */
        }

        /* 子包含框 */
        #sub_box {
            width: 100px; /* 固定宽度 */
            height: 50px; /* 固定高度 */
            background: blue; /* 蓝色背景 */
        }

        body {
            font-size: 48px;
        }

        .baseline {
            vertical-align: baseline;
        }

        .sub {
            vertical-align: sub;
        }

        .super {
            vertical-align: super;
        }

        .top {
            vertical-align: top;
        }

        .text-top {
            vertical-align: text-top;
        }

        .middle {
            vertical-align: middle;
        }

        .bottom {
            vertical-align: bottom;
        }

    </style>
</head>

<body>
<p>vertical-align表示垂直<span class=" super ">对齐</span>属性</p>

<div id="box">
    <div id="sub_box"></div>
</div>

<p>valign:
    <span class="baseline"><img src="images/box.gif" title="baseline"/></span>
    <span class="sub"><img src="images/box.gif" title="sub"/></span>
    <span class="super"><img src="images/box.gif" title="super"/></span>
    <span class="top"><img src="images/box.gif" title="top"/></span>
    <span class="text-top"><img src="images/box.gif" title="text-top"/></span>
    <span class="middle"><img src="images/box.gif" title="middle"/></span>
    <span class="bottom"><img src="images/box.gif" title="bottom"/></span>
    <span class="text-bottom"><img src="images/box.gif" title="text-bottom"/></span>
</p>
</body>
</html>